<template>
  <div class="shop-info-wrapper">
    <div class="shop-info">
      <div class="delivery-info">
        <h2>配送信息</h2>
        <p>
          <span>饱了么专送</span>
          由商家配送提供配送， 约 28 分钟送达， 距离 1000mm
        </p>
        <p>配送费￥4</p>
      </div>

      <div class="split"></div>

      <div class="activity">
        <h2 class="title">活动与服务</h2>
        <ul class="list">
          <li>
            <span class="tag green">首单</span>
            <span class="content">新用户下单立减17元(不与其它活动同享)</span>
          </li>
          <li>
            <span class="tag red">满减</span>
            <span class="content">满35减19，满65减35</span>
          </li>
          <li>
            <span class="tag orange">特价</span>
            <span class="content">【立减19.5元】欢乐小食餐</span>
          </li>
          <li>
            <span class="tag orange">特价</span>
            <span class="content">【立减19.5元】欢乐小食餐</span>
          </li>
          <li>
            <span class="tag orange">特价</span>
            <span class="content">【立减19.5元】欢乐小食餐</span>
          </li>
          <li>
            <span class="tag orange">特价</span>
            <span class="content">【立减19.5元】欢乐小食餐</span>
          </li>
        </ul>
      </div>

      <div class="split"></div>

      <div class="shop-photo">
        <div class="title">商家实景</div>
        <div class="photo-wrapper">
          <ul>
            <li class="photo-item">
              <img src="./imgs/1.jpeg" alt="" />
            </li>
            <li class="photo-item">
              <img src="./imgs/2.jpeg" alt="" />
            </li>
            <li class="photo-item">
              <img src="./imgs/3.jpeg" alt="" />
            </li>
            <li class="photo-item">
              <img src="./imgs/4.jpeg" alt="" />
            </li>
            <li class="photo-item">
              <img src="./imgs/5.jpeg" alt="" />
            </li>
          </ul>
        </div>
      </div>

      <div class="split"></div>

      <div class="info-detail">
        <div class="title">商家信息</div>
        <ul>
          <li>
            <span class="left">品类</span>
            <span class="right">包子, 汤粥</span>
          </li>
          <li>
            <span class="left">商家电话</span>
            <span class="right">183xxxxxxxx</span>
          </li>
          <li>
            <span class="left">地址</span>
            <span class="right">郑州市金水区文化路67号</span>
          </li>
          <li>
            <span class="left">营业时间</span>
            <span class="right">05:00-11:00</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BetterScroll from "better-scroll"
export default {
  mounted() {
    let bsWrapper = new BetterScroll(".shop-info-wrapper", {
      bounceTime: 300,
      disableMouse: false,
      disableTouch: false,
    })
    let bsPhoto = new BetterScroll(".photo-wrapper", {
      scrollX: true,
      bounceTime: 300,
      disableMouse: false,
      disableTouch: false,
    })
  },
}
</script>

<style lang="less" scoped>
@import "../../../common/style/mixin";
.shop-info-wrapper {
  position: absolute;
  top: 19.5rem;
  bottom: 0;
  width: 100vw;
  overflow: hidden;
}

.delivery-info {
  padding: 1.7rem 1.4rem 1rem;
  background-color: #fff;
  color: #666;
  h2 {
    color: #000;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.6rem;
  }
  p {
    font-size: 1.3rem;
    line-height: 1.8rem;
    margin-bottom: 0.5rem;
    span {
      display: inline-block;
      height: 2rem;
      width: 6.5rem;
      line-height: 1.2rem;
      font-size: 1.1rem;
      margin-right: 1rem;
      text-align: center;
      color: #fff;
      background-color: #0097ff;
      padding: 0.4rem 0;
      border-radius: 0.4rem;
    }
  }
}

.split {
  height: 1rem;
  .bottom-border-1px(#dbdee1);
  .top-border-1px(#dbdee1);
}

.activity {
  padding: 1.6rem 1.4rem 1.4rem;
  background-color: #fff;
  .title {
    color: #000;
    font-weight: 700;
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
  }
  .list {
    li {
      display: flex;
      span {
        margin-bottom: 1.1rem;
        &.tag {
          width: 3.6rem;
          height: 1.8rem;
          font-size: 1.2rem;
          line-height: 1.8rem;
          text-align: center;
          border-radius: 0.2rem;
          margin-right: 1rem;
        }
        &.content {
          font-size: 1.3rem;
          color: #666666;
        }
      }
    }
  }
}

.shop-photo {
  padding: 1.6rem 1.4rem 1.4rem;
  background-color: #fff;
  .title {
    margin-bottom: 1.6rem;
    font-size: 1.6rem;
    color: #000;
    font-weight: 700;
    line-height: 1.6rem;
  }
  ul {
    display: inline-flex;
    flex-wrap: nowrap;
    .photo-item {
      width: 12rem;
      height: 9rem;
      margin-right: 0.6rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.info-detail {
  padding: 1.6rem 1.4rem 1.4rem;
  background-color: #fff;
  .title {
    margin-bottom: 1.6rem;
    font-size: 1.6rem;
    color: #000;
    font-weight: 700;
    line-height: 1.6rem;
  }
  ul {
    li {
      display: flex;
      justify-content: space-between;
      margin-bottom: 3rem;
      .left {
        font-size: 1.3rem;
        font-weight: 700;
        color: #333;
      }
      .right {
        font-size: 1.3rem;
        color: #666666;
      }
    }
  }
}

.green {
  color: #fff !important;
  background-color: #70bc46 !important;
}
.red {
  color: #fff !important;
  background-color: #ee6060 !important;
}
.orange {
  color: #fff !important;
  background-color: orange !important;
}
</style>
